import React from 'react';
import { Row, Col } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

export function getCommonContent(dataSource, columns) {
    return (
        <section className={styles.gutterContainer}>
            {columns.map(item => {
                const { title, dataIndex, render, require, single } = item;
                let display = dataSource[dataIndex];
                display = render ? render(display, dataSource, dataIndex) : display;
                if (single) {
                    return (
                        <Row
                            className={styles.single}
                            type="flex"
                            justify="center"
                            align="middle"
                            key={`${dataIndex}${title}`}
                        >
                            <Col>{display}</Col>
                        </Row>
                    );
                }
                return (
                    <Row className={styles.gutterRow} key={`${dataIndex}${title}`}>
                        <Col
                            className={classNames([
                                { [styles.require]: require, [styles.hasTitle]: !!title },
                                styles.gutterLabel,
                                styles.gutterCol
                            ])}
                            span={6}
                        >
                            {title || ''}
                        </Col>
                        <Col className={styles.gutterCol} span={16}>
                            {display}
                        </Col>
                    </Row>
                );
            })}
        </section>
    );
}
